<template>
  <view class="search-container">
    <!-- 搜索框 -->
    <view class="search-header">
      <view class="search-input-wrap">
        <text class="iconfont icon-search"></text>
        <input 
          class="search-input" 
          type="text" 
          v-model="keyword" 
          placeholder="搜索作品、风格或用户" 
          confirm-type="search"
          @confirm="handleSearch"
          focus
        />
        <text 
          class="clear-icon iconfont icon-close" 
          v-if="keyword" 
          @click="clearKeyword"
        ></text>
      </view>
      <text class="cancel-btn" @click="goBack">取消</text>
    </view>
    
    <!-- 搜索历史 -->
    <view class="search-history" v-if="!keyword && searchHistory.length > 0">
      <view class="history-header">
        <text class="history-title">搜索历史</text>
        <text class="clear-history" @click="clearHistory">清除</text>
      </view>
      <view class="history-list">
        <view 
          class="history-item" 
          v-for="(item, index) in searchHistory" 
          :key="index"
          @click="useHistoryKeyword(item)"
        >
          <text class="iconfont icon-time"></text>
          <text class="history-text">{{item}}</text>
        </view>
      </view>
    </view>
    
    <!-- 热门搜索 -->
    <view class="hot-search" v-if="!keyword && !isSearching">
      <view class="hot-header">
        <text class="hot-title">热门搜索</text>
      </view>
      <view class="hot-tags">
        <view 
          class="hot-tag" 
          v-for="(tag, index) in hotTags" 
          :key="index"
          @click="useHistoryKeyword(tag)"
        >
          {{tag}}
        </view>
      </view>
    </view>
    
    <!-- 搜索提示 -->
    <view class="search-suggest" v-if="keyword && !isSearching && suggestList.length > 0">
      <view 
        class="suggest-item" 
        v-for="(item, index) in suggestList" 
        :key="index"
        @click="useHistoryKeyword(item.name)"
      >
        <text class="iconfont" :class="{
          'icon-image': item.type === 'artwork',
          'icon-tag': item.type === 'style',
          'icon-user': item.type === 'user',
          'icon-search': !item.type || !['artwork', 'style', 'user'].includes(item.type)
        }"></text>
        <text class="suggest-text">{{item.name}}</text>
        <text class="suggest-type">{{getTypeName(item.type)}}</text>
      </view>
    </view>
    
    <!-- 搜索结果 -->
    <view class="search-result" v-if="isSearching">
      <!-- 结果分类标签 -->
      <scroll-view class="result-tabs" scroll-x="true" show-scrollbar="false">
        <view 
          class="tab-item" 
          v-for="(tab, index) in tabs" 
          :key="index"
          :class="{ active: currentTab === tab.value }"
          @click="switchTab(tab.value)"
        >
          {{tab.name}}
        </view>
      </scroll-view>
      
      <!-- 作品结果 -->
      <view class="result-content" v-if="currentTab === 'artwork'">
        <view class="result-grid" v-if="artworkList.length > 0">
          <view 
            class="artwork-item" 
            v-for="(item, index) in artworkList" 
            :key="index"
            @click="goToDetail(item.id)"
          >
            <image class="artwork-image" :src="item.resultImage" mode="aspectFill"></image>
            <view class="artwork-info">
              <view class="artwork-user">
                <image class="user-avatar" :src="item.user.avatar" mode="aspectFill"></image>
                <text class="user-name">{{item.user.nickname}}</text>
              </view>
              <view class="artwork-likes">
                <text class="iconfont icon-like"></text>
                <text class="likes-count">{{item.likeCount}}</text>
              </view>
            </view>
          </view>
        </view>
        <view class="empty-result" v-else>
          <image class="empty-image" src="/static/images/empty-search.png" mode="aspectFit"></image>
          <text class="empty-text">暂无相关作品</text>
        </view>
      </view>
      
      <!-- 专辑结果 -->
      <view class="result-content" v-if="currentTab === 'album'">
        <view class="album-list" v-if="albumList.length > 0">
          <view 
            class="album-item" 
            v-for="(item, index) in albumList" 
            :key="index"
            @click="goToAlbum(item.id)"
          >
            <view class="album-cover">
              <image class="album-cover-image" :src="item.coverImage" mode="aspectFill"></image>
              <view class="album-count">
                <text class="iconfont icon-image"></text>
                <text class="count-text">{{item.imageCount}}张</text>
              </view>
            </view>
            <view class="album-info">
              <text class="album-title">{{item.title}}</text>
              <text class="album-desc">{{item.description || '暂无描述'}}</text>
              <view class="album-user">
                <image class="user-avatar" :src="item.user.avatar" mode="aspectFill"></image>
                <text class="user-name">{{item.user.nickname}}</text>
              </view>
            </view>
          </view>
        </view>
        <view class="empty-result" v-else>
          <image class="empty-image" src="/static/images/empty-search.png" mode="aspectFit"></image>
          <text class="empty-text">暂无相关专辑</text>
        </view>
      </view>
      
      <!-- 风格结果 -->
      <view class="result-content" v-if="currentTab === 'style'">
        <view class="style-list" v-if="styleList.length > 0">
          <view 
            class="style-item" 
            v-for="(item, index) in styleList" 
            :key="index"
            @click="goToStyle(item.id)"
          >
            <image class="style-image" :src="item.previewImage" mode="aspectFill"></image>
            <view class="style-info">
              <text class="style-name">{{item.name}}</text>
              <text class="style-desc">{{item.description}}</text>
              <view class="style-tags">
                <text class="style-tag" v-for="(tag, tagIndex) in item.tags" :key="tagIndex">{{tag}}</text>
              </view>
            </view>
          </view>
        </view>
        <view class="empty-result" v-else>
          <image class="empty-image" src="/static/images/empty-search.png" mode="aspectFit"></image>
          <text class="empty-text">暂无相关风格</text>
        </view>
      </view>
      
      <!-- 用户结果 -->
      <view class="result-content" v-if="currentTab === 'user'">
        <view class="user-list" v-if="userList.length > 0">
          <view 
            class="user-item" 
            v-for="(item, index) in userList" 
            :key="index"
            @click="goToUser(item.id)"
          >
            <image class="user-avatar-large" :src="item.avatar" mode="aspectFill"></image>
            <view class="user-info">
              <text class="user-nickname">{{item.nickname}}</text>
              <text class="user-desc">{{item.bio || '这个人很懒，什么都没留下'}}</text>
              <view class="user-stats">
                <text class="stat-item">作品 {{item.workCount}}</text>
                <text class="stat-item">粉丝 {{item.followerCount}}</text>
              </view>
            </view>
            <button class="btn btn-outline btn-follow" size="mini">关注</button>
          </view>
        </view>
        <view class="empty-result" v-else>
          <image class="empty-image" src="/static/images/empty-search.png" mode="aspectFit"></image>
          <text class="empty-text">暂无相关用户</text>
        </view>
      </view>
      
      <!-- 加载更多 -->
      <view class="load-more" v-if="hasMore">
        <text class="load-text" @click="loadMore">{{loading ? '加载中...' : '加载更多'}}</text>
      </view>
    </view>
  </view>
</template>

<script>
import { feedApi, styleApi, albumApi } from '@/utils/api.js';

export default {
  data() {
    return {
      // 搜索关键词
      keyword: '',
      
      // 搜索历史
      searchHistory: [],
      
      // 热门标签
      hotTags: ['油画风格', '水彩画', '动漫风格', '写实风格', '复古风', '赛博朋克', '梦幻风格', '极简主义'],
      
      // 搜索建议
      suggestList: [],
      
      // 是否正在搜索
      isSearching: false,
      
      // 结果分类标签
      tabs: [
        { name: '作品', value: 'artwork' },
        { name: '专辑', value: 'album' },
        { name: '风格', value: 'style' },
        { name: '用户', value: 'user' }
      ],
      
      // 当前选中的标签
      currentTab: 'artwork',
      
      // 作品列表
      artworkList: [],
      
      // 风格列表
      styleList: [],
      
      // 用户列表
      userList: [],
      
      // 专辑列表
      albumList: [],
      
      // 分页信息
      page: 1,
      pageSize: 10,
      hasMore: true,
      
      // 加载状态
      loading: false
    };
  },
  
  onLoad(options) {
    // 如果有传入的关键词，直接搜索
    if (options.keyword) {
      this.keyword = options.keyword;
      this.handleSearch();
    }
    
    // 加载搜索历史
    this.loadSearchHistory();
    
    // 加载热门标签
    this.loadHotTags();
  },
  
  methods: {
    /**
     * 加载热门标签
     */
    async loadHotTags() {
      try {
        const res = await styleApi.getHotTags(8); // 获取8个热门标签
        if (res.code === 200 && res.data && res.data.length > 0) {
          this.hotTags = res.data.map(tag => tag.name);
        }
      } catch (error) {
        console.error('加载热门标签失败', error);
      }
    },
    
    /**
     * 加载搜索历史
     */
    loadSearchHistory() {
      const history = uni.getStorageSync('searchHistory');
      if (history) {
        try {
          this.searchHistory = JSON.parse(history);
        } catch (e) {
          console.error('解析搜索历史失败', e);
        }
      }
    },
    
    /**
     * 保存搜索历史
     * @param {string} keyword - 关键词
     */
    saveSearchHistory(keyword) {
      if (!keyword) return;
      
      // 如果已存在，先移除
      const index = this.searchHistory.indexOf(keyword);
      if (index !== -1) {
        this.searchHistory.splice(index, 1);
      }
      
      // 添加到最前面
      this.searchHistory.unshift(keyword);
      
      // 最多保留10个
      if (this.searchHistory.length > 10) {
        this.searchHistory.pop();
      }
      
      // 保存到本地存储
      uni.setStorageSync('searchHistory', JSON.stringify(this.searchHistory));
    },
    
    /**
     * 清除搜索历史
     */
    clearHistory() {
      uni.showModal({
        title: '清除搜索历史',
        content: '确定要清除所有搜索历史吗？',
        success: (res) => {
          if (res.confirm) {
            this.searchHistory = [];
            uni.removeStorageSync('searchHistory');
          }
        }
      });
    },
    
    /**
     * 使用历史关键词
     * @param {string} keyword - 关键词
     */
    useHistoryKeyword(keyword) {
      this.keyword = keyword;
      this.handleSearch();
    },
    
    /**
     * 清除关键词
     */
    clearKeyword() {
      this.keyword = '';
      this.isSearching = false;
    },
    
    /**
     * 处理搜索
     */
    handleSearch() {
      if (!this.keyword) return;
      
      // 保存搜索历史
      this.saveSearchHistory(this.keyword);
      
      // 设置搜索状态
      this.isSearching = true;
      
      // 重置分页
      this.page = 1;
      this.hasMore = true;
      
      // 搜索结果
      this.searchResults();
    },
    
    /**
     * 搜索结果
     */
    async searchResults() {
      if (this.loading) return;
      
      this.loading = true;
      
      try {
        // 根据当前标签搜索不同内容
        if (this.currentTab === 'artwork') {
          await this.searchArtworks();
        } else if (this.currentTab === 'album') {
          await this.searchAlbums();
        } else if (this.currentTab === 'style') {
          await this.searchStyles();
        } else if (this.currentTab === 'user') {
          await this.searchUsers();
        }
      } catch (error) {
        console.error('搜索失败', error);
        uni.showToast({
          title: '搜索失败，请重试',
          icon: 'none'
        });
      } finally {
        this.loading = false;
      }
    },
    
    /**
     * 搜索专辑
     */
    async searchAlbums() {
      try {
        // 使用专辑列表API来实现搜索功能
        // 注意：当前后端可能不支持专辑搜索，这里我们使用现有的API
        const result = await albumApi.getAlbumList({
          page: this.page,
          size: this.pageSize
        });
        
        // 如果有关键词，在前端进行过滤
        let filteredList = result.data.list || [];
        if (this.keyword && this.keyword.trim() !== '') {
          const keyword = this.keyword.toLowerCase();
          filteredList = filteredList.filter(album => 
            (album.title && album.title.toLowerCase().includes(keyword)) || 
            (album.description && album.description.toLowerCase().includes(keyword))
          );
        }
        
        if (result.code === 200) {
          // 更新数据，使用过滤后的列表
          if (this.page === 1) {
            this.albumList = filteredList;
          } else {
            this.albumList = [...this.albumList, ...filteredList];
          }
          
          // 更新分页信息
          this.hasMore = result.data.hasNextPage || false;
          this.page++;
        } else {
          uni.showToast({
            title: result.message || '获取专辑列表失败',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('搜索专辑失败', error);
        throw error;
      }
    },
    
    /**
     * 搜索作品
     */
    async searchArtworks() {
      try {
        const result = await feedApi.getFeedList({
          keyword: this.keyword,
          page: this.page,
          size: this.pageSize
        });
        
        if (result.code === 200 && result.data) {
          // 更新数据
          if (this.page === 1) {
            this.artworkList = result.data.list || [];
          } else {
            this.artworkList = [...this.artworkList, ...(result.data.list || [])];
          }
          
          // 更新分页信息
          this.hasMore = result.data.hasNextPage || false;
          this.page++;
        } else {
          uni.showToast({
            title: result.message || '获取作品列表失败',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('搜索作品失败', error);
        throw error;
      }
    },
    
    /**
     * 搜索风格
     */
    async searchStyles() {
      try {
        const result = await styleApi.getAllStyles({
          keyword: this.keyword,
          pageNum: this.page,
          pageSize: this.pageSize
        });
        
        if (result.code === 200 && result.data) {
          // 更新数据
          if (this.page === 1) {
            this.styleList = result.data.list || [];
          } else {
            this.styleList = [...this.styleList, ...(result.data.list || [])];
          }
          
          // 更新分页信息
          this.hasMore = result.data.hasNextPage || false;
          this.page++;
        } else {
          uni.showToast({
            title: result.message || '获取风格列表失败',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('搜索风格失败', error);
        throw error;
      }
    },
    
    /**
     * 搜索用户
     */
    async searchUsers() {
      // 这里假设有搜索用户的API
      // 实际项目中需要实现
      try {
        // 由于没有用户搜索API，暂时使用模拟数据
        const result = {
          code: 200,
          data: {
            list: [
              {
                id: 1,
                nickname: '良钢',
                avatar: 'https://picsum.photos/300/500?random=10',
                bio: '热爱艺术创作',
                workCount: 10,
                followerCount: 100
              },
              {
                id: 2,
                nickname: '慧琦',
                avatar: 'https://picsum.photos/300/500?random=10',
                bio: '专注于风景摄影',
                workCount: 5,
                followerCount: 50
              }
            ],
            hasNextPage: false
          }
        };
        
        // 更新数据
        if (this.page === 1) {
          this.userList = result.data.list;
        } else {
          this.userList = [...this.userList, ...result.data.list];
        }
        
        // 更新分页信息
        this.hasMore = result.data.hasNextPage;
        this.page++;
      } catch (error) {
        console.error('搜索用户失败', error);
        throw error;
      }
    },
    
    /**
     * 获取搜索建议
     */
    async getSuggestions() {
      if (!this.keyword) {
        this.suggestList = [];
        return;
      }
      
      try {
        // 这里可以调用搜索建议API
        // 由于没有搜索建议API，暂时使用模拟数据
        this.suggestList = [
          { name: this.keyword, type: 'style' },
          { name: this.keyword, type: 'artwork' },
          { name: this.keyword, type: 'album' },
          { name: this.keyword, type: 'user' }
        ];
      } catch (error) {
        console.error('获取搜索建议失败', error);
      }
    },
    
    /**
     * 切换标签
     * @param {string} tab - 标签值
     */
    switchTab(tab) {
      if (this.currentTab === tab) return;
      
      this.currentTab = tab;
      
      // 重置分页
      this.page = 1;
      this.hasMore = true;
      
      // 搜索结果
      this.searchResults();
    },
    
    /**
     * 加载更多
     */
    loadMore() {
      if (this.loading || !this.hasMore) return;
      
      this.searchResults();
    },
    
    /**
     * 获取图标类名
     * @param {string} type - 类型
     * @returns {string} 图标类名
     */
    getIconClass(type) {
      const iconMap = {
        artwork: 'icon-image',
        album: 'icon-album',
        style: 'icon-tag',
        user: 'icon-user'
      };
      
      return iconMap[type] || 'icon-search';
    },
    
    /**
     * 获取类型名称
     * @param {string} type - 类型
     * @returns {string} 类型名称
     */
    getTypeName(type) {
      const typeMap = {
        artwork: '作品',
        album: '专辑',
        style: '风格',
        user: '用户'
      };
      
      return typeMap[type] || '';
    },
    
    /**
     * 跳转到作品详情
     * @param {number} id - 作品ID
     */
    goToDetail(id) {
      uni.navigateTo({
        url: `/pages/detail/detail?id=${id}`
      });
    },
    
    /**
     * 跳转到专辑详情
     * @param {number} id - 专辑ID
     */
    goToAlbum(id) {
      uni.navigateTo({
        url: `/pages/album-detail/album-detail?id=${id}`
      });
    },
    
    /**
     * 跳转到风格详情
     * @param {number} id - 风格ID
     */
    goToStyle(id) {
      uni.navigateTo({
        url: `/pages/style/style?id=${id}`
      });
    },
    
    /**
     * 跳转到用户主页
     * @param {number} id - 用户ID
     */
    goToUser(id) {
      uni.navigateTo({
        url: `/pages/user/user?id=${id}`
      });
    },
    
    /**
     * 返回上一页
     */
    goBack() {
      uni.navigateBack();
    }
  },
  
  // 监听关键词变化，获取搜索建议
  watch: {
    keyword(newVal) {
      if (!newVal) {
        this.isSearching = false;
        this.suggestList = [];
      } else {
        this.getSuggestions();
      }
    }
  }
};
</script>

<style lang="scss">
@import '@/static/styles/global.scss';

.search-container {
  min-height: 100vh;
  background-color: $background-color;
}

.search-header {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: #FFFFFF;
  position: sticky;
  top: 0;
  z-index: 100;
  
  .search-input-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    background-color: $background-color-dark;
    border-radius: 40rpx;
    padding: 0 20rpx;
    height: 70rpx;
    
    .icon-search {
      font-size: 32rpx;
      color: $text-color-secondary;
      margin-right: 10rpx;
    }
    
    .search-input {
      flex: 1;
      height: 70rpx;
      font-size: 28rpx;
    }
    
    .clear-icon {
      font-size: 32rpx;
      color: $text-color-secondary;
      padding: 10rpx;
    }
  }
  
  .cancel-btn {
    font-size: 28rpx;
    color: $text-color-primary;
    margin-left: 20rpx;
    padding: 10rpx;
  }
}

.search-history {
  background-color: #FFFFFF;
  padding: 20rpx 30rpx;
  margin-bottom: 20rpx;
  
  .history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    
    .history-title {
      font-size: 32rpx;
      font-weight: bold;
      color: $text-color-primary;
    }
    
    .clear-history {
      font-size: 24rpx;
      color: $text-color-secondary;
      padding: 10rpx;
    }
  }
  
  .history-list {
    .history-item {
      display: flex;
      align-items: center;
      padding: 20rpx 0;
      border-bottom: 1rpx solid $border-color-light;
      
      &:last-child {
        border-bottom: none;
      }
      
      .icon-time {
        font-size: 32rpx;
        color: $text-color-secondary;
        margin-right: 20rpx;
      }
      
      .history-text {
        font-size: 28rpx;
        color: $text-color-primary;
      }
    }
  }
}

.hot-search {
  background-color: #FFFFFF;
  padding: 20rpx 30rpx;
  
  .hot-header {
    margin-bottom: 20rpx;
    
    .hot-title {
      font-size: 32rpx;
      font-weight: bold;
      color: $text-color-primary;
    }
  }
  
  .hot-tags {
    display: flex;
    flex-wrap: wrap;
    
    .hot-tag {
      font-size: 24rpx;
      color: $text-color-primary;
      background-color: $background-color-dark;
      padding: 10rpx 20rpx;
      border-radius: 30rpx;
      margin-right: 20rpx;
      margin-bottom: 20rpx;
    }
  }
}

.search-suggest {
  background-color: #FFFFFF;
  
  .suggest-item {
    display: flex;
    align-items: center;
    padding: 20rpx 30rpx;
    border-bottom: 1rpx solid $border-color-light;
    
    .iconfont {
      font-size: 32rpx;
      color: $text-color-secondary;
      margin-right: 20rpx;
    }
    
    .suggest-text {
      flex: 1;
      font-size: 28rpx;
      color: $text-color-primary;
    }
    
    .suggest-type {
      font-size: 24rpx;
      color: $text-color-secondary;
      background-color: $background-color-dark;
      padding: 4rpx 10rpx;
      border-radius: 4rpx;
    }
  }
}

.search-result {
  .result-tabs {
    display: flex;
    background-color: #FFFFFF;
    padding: 0 30rpx;
    white-space: nowrap;
    position: sticky;
    top: 110rpx;
    z-index: 90;
    overflow-x: auto;
    
    .tab-item {
      display: inline-block;
      font-size: 28rpx;
      color: $text-color-primary;
      padding: 20rpx 30rpx;
      position: relative;
      
      &.active {
        color: $primary-color;
        font-weight: bold;
        
        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 25%;
          width: 50%;
          height: 4rpx;
          background-color: $primary-color;
          border-radius: 2rpx;
        }
      }
    }
  }
  
  .result-content {
    padding: 20rpx;
  }
  
  .result-grid {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10rpx;
    
    .artwork-item {
      width: 50%;
      padding: 10rpx;
      box-sizing: border-box;
      margin-bottom: 20rpx;
    }
    
    .artwork-image {
      width: 100%;
      height: 340rpx;
      border-radius: $border-radius-medium;
      box-shadow: $box-shadow-light;
    }
    
    .artwork-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10rpx 0;
    }
    
    .artwork-user {
      display: flex;
      align-items: center;
    }
    
    .user-avatar {
      width: 40rpx;
      height: 40rpx;
      border-radius: $border-radius-circle;
      margin-right: 10rpx;
    }
    
    .user-name {
      font-size: 24rpx;
      color: $text-color-secondary;
      @extend .text-ellipsis;
      max-width: 200rpx;
    }
    
    .artwork-likes {
      display: flex;
      align-items: center;
      font-size: 24rpx;
      color: $text-color-secondary;
      
      .icon-like {
        margin-right: 6rpx;
      }
    }
  }
  
  .album-list {
    .album-item {
      display: flex;
      background-color: #FFFFFF;
      border-radius: $border-radius-medium;
      margin-bottom: 20rpx;
      box-shadow: $box-shadow-light;
      overflow: hidden;
    }
    
    .album-cover {
      position: relative;
      width: 200rpx;
      height: 200rpx;
    }
    
    .album-cover-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .album-count {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: rgba(0, 0, 0, 0.5);
      color: #FFFFFF;
      font-size: 22rpx;
      padding: 6rpx 10rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      
      .icon-image {
        margin-right: 6rpx;
      }
    }
    
    .album-info {
      flex: 1;
      padding: 20rpx;
      display: flex;
      flex-direction: column;
    }
    
    .album-title {
      font-size: 32rpx;
      font-weight: bold;
      color: $text-color-primary;
      margin-bottom: 10rpx;
    }
    
    .album-desc {
      font-size: 24rpx;
      color: $text-color-secondary;
      margin-bottom: 20rpx;
      @extend .text-ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      white-space: normal;
    }
    
    .album-user {
      display: flex;
      align-items: center;
      margin-top: auto;
      
      .user-avatar {
        width: 40rpx;
        height: 40rpx;
        border-radius: $border-radius-circle;
        margin-right: 10rpx;
      }
      
      .user-name {
        font-size: 24rpx;
        color: $text-color-secondary;
      }
    }
  }
  
  .style-list {
    .style-item {
      display: flex;
      background-color: #FFFFFF;
      border-radius: $border-radius-medium;
      margin-bottom: 20rpx;
      box-shadow: $box-shadow-light;
      overflow: hidden;
    }
    
    .style-image {
      width: 200rpx;
      height: 200rpx;
    }
    
    .style-info {
      flex: 1;
      padding: 20rpx;
      display: flex;
      flex-direction: column;
    }
    
    .style-name {
      font-size: 32rpx;
      font-weight: bold;
      color: $text-color-primary;
      margin-bottom: 10rpx;
    }
    
    .style-desc {
      font-size: 24rpx;
      color: $text-color-secondary;
      margin-bottom: 20rpx;
      @extend .text-ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      white-space: normal;
    }
    
    .style-tags {
      display: flex;
      flex-wrap: wrap;
    }
    
    .style-tag {
      font-size: 22rpx;
      color: $primary-color;
      background-color: $primary-light;
      padding: 4rpx 12rpx;
      border-radius: 20rpx;
      margin-right: 10rpx;
      margin-bottom: 10rpx;
    }
  }
  
  .user-list {
    .user-item {
      display: flex;
      align-items: center;
      background-color: #FFFFFF;
      border-radius: $border-radius-medium;
      padding: 20rpx;
      margin-bottom: 20rpx;
      box-shadow: $box-shadow-light;
    }
    
    .user-avatar-large {
      width: 100rpx;
      height: 100rpx;
      border-radius: $border-radius-circle;
      margin-right: 20rpx;
    }
    
    .user-info {
      flex: 1;
    }
    
    .user-nickname {
      font-size: 32rpx;
      font-weight: bold;
      color: $text-color-primary;
      margin-bottom: 6rpx;
    }
    
    .user-desc {
      font-size: 24rpx;
      color: $text-color-secondary;
      margin-bottom: 10rpx;
      @extend .text-ellipsis;
    }
    
    .user-stats {
      display: flex;
    }
    
    .stat-item {
      font-size: 22rpx;
      color: $text-color-secondary;
      margin-right: 20rpx;
    }
    
    .btn-follow {
      padding: 0 30rpx;
      height: 60rpx;
      line-height: 60rpx;
      font-size: 24rpx;
    }
  }
  
  .empty-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100rpx 0;
    
    .empty-image {
      width: 200rpx;
      height: 200rpx;
      margin-bottom: 30rpx;
    }
    
    .empty-text {
      font-size: 28rpx;
      color: $text-color-secondary;
    }
  }
  
  .load-more {
    text-align: center;
    padding: 30rpx 0;
    
    .load-text {
      font-size: 28rpx;
      color: $text-color-secondary;
    }
  }
}
</style>
